<!-- 二维码扫描 -->
<template>
  <div class="container-QR">
    <van-icon name="close" size="60" class="buts" @click="colsed"/>
    <!-- <div class="buts">
      <van-button type="default"  @click="startRecognize" >创建扫码控件</van-button>
      <van-button type="primary"  @click="startScan">开始扫码</van-button>
      <van-button type="info" @click="cancelScan">取消扫码</van-button>
      <van-button type="warning" @click="setFlash">开启闪光灯</van-button>
    </div> -->
    <div id="bcid"></div>
    <input type="text" id="text">
  </div>

</template>

<script type='textecmascript-6'>
import { setTimeout } from 'timers';
export default {
  data() {
    return {
      scan: null,
    };
  },
  created() {
    // 扩展API加载完毕后调用onPlusReady回调函数
    document.addEventListener("plusready", this.onPlusReady, false);
    // 扩展API加载完毕，现在可以正常调用扩展API
    setTimeout(()=>{
      this.startRecognize()
    },600)
  },
  methods: {
    onPlusReady() {
      var e = document.getElementById("scan");
      e.removeAttribute("disabled");
    },
    onmarked(type, result) {
      var text = "未知: ";
      switch (type) {
        case plus.barcode.QR:
          text = "QR: ";
          break;
        case plus.barcode.EAN13:
          text = "EAN13: ";
          break;
        case plus.barcode.EAN8:
          text = "EAN8: ";
          break;
      }
      this.cancelScan()
      if(text == 'QR: ') {
        this.$router.push({path:'/modelMessage',query:{url:result}})
      }
      this.$emit('isShow',false)//关闭扫码窗口
      this.closeScan()
    },
    startRecognize() {
      this.scan = new plus.barcode.Barcode("bcid");
      this.startScan()
      this.scan.onmarked = this.onmarked;
    },
    startScan() {
      this.scan.start();
    },
    cancelScan() {
      this.scan.cancel();
    },
    setFlash() {
      this.scan.setFlash();
    },
    closeScan(){
      this.scan.close()
    },
    colsed(){
      this.cancelScan()
      this.closeScan()
      this.$emit('isShow',false)//关闭扫码窗口
    }
  }
};
</script>
<style lang='stylus' scoped rel='stylesheet/stylus'>
.container-QR
  width 100%
  height 100%
  position fixed
  top 0
  left 0
  z-index 5000
  .buts
    position absolute
    top 20px
    left 20px
    font-size 60px
    text-align center
</style>
<style type="text/css">
#bcid {
  background: rgba(0,0,0,1);
  height: 100%;
  width: 100%;
}
.container-QR .van-icon:before{
  font-size: 60px !important;
  color:white
}
</style>